<!--
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 
 *            佛祖保佑       永不宕机     永无BUG
 * 
 *        佛曰:  
 *                写字楼里写字间，写字间里程序员；  
 *                程序人员写程序，又拿程序换酒钱。  
 *                酒醒只在网上坐，酒醉还来网下眠；  
 *                酒醉酒醒日复日，网上网下年复年。  
 *                但愿老死电脑间，不愿鞠躬老板前；  
 *                奔驰宝马贵者趣，公交自行程序员。  
 *                别人笑我忒疯癫，我笑自己命太贱；  
 *                不见满街漂亮妹，哪个归得程序员？
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: '楷体';
        }

        table {
            width: 600px;
            height: 400px;
            border-collapse: collapse;
            margin: 100px auto;
            background-color: #f9f1db;
        }

        td {
            border: 1px solid green;
            text-align: center;
        }
        th{
            height: 30px;
            border: 1px solid green;
        }
        .btn {
            width: 100px;
            height: 30px;
            border-radius: 10px;
            line-height: 30px;
            text-align: center;
            background: green;
            color: #fff;
            cursor: pointer;
            position: absolute;
            top: 100px;
            right: 200px;
        }
        .info{
            width: 200px;
            height: 40px;
            border: 1px solid green;
            border-radius: 10px;
            color: red;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            background-color: #f9f1db;
            font-size: 20px;
            margin: 0 auto;
            display: none;
        }
    </style>
</head>

<body>
    <div class="btn">添加</div>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div class="info">已读取全部信息</div>
</body>
<script>
    let arr = [
        { name: '张三', age: 18, sex: '男', like: '男上加男' },
        { name: '李四', age: 20, sex: '男', like: '左右为男' },
        { name: '王五', age: 22, sex: '男', like: '知男而上' },
        { name: '马六', age: 24, sex: '男', like: '强人锁男' },
    ];
    let tb = document.querySelector('tbody');
    let btn = document.querySelector('.btn');
    let info = document.querySelector('.info');
    console.log(info)
    let num=0;
    console.log(arr.length);
    btn.onclick = () => {
        if(num <= arr.length-1){
            tb.innerHTML += `
            <tr>
                <td>${arr[num].name}</td>
                <td>${arr[num].age}</td>
                <td>${arr[num].sex}</td>
                <td>${arr[num].like}</td>
            </tr>
        `
        }else{
            info.style.display = 'block';
        }
        num++;
        console.log(this)
    }

</script>

</html>